<!DOCTYPE html>
<html lang="en">

<head>
    <title>登录注册页面</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/lib/login/css/index.css">
    <link rel="stylesheet" href="/lib/login/css/demo.css">
    <script src="/js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/login/js/ban.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <canvas class="cavs" width="1575" height="1337"></canvas>
    <div class="loginmain">
        <section id="content">
            <!-- 上方登录注册选择框div -->
            <div class="content-header clearfix">
                <a href="javascript:;" class="current">登陆</a>
            </div>
            <!-- 下方表单div -->
            <div class="content-body">
                <!-- 登录表单div -->
                <div class="dom" style="display: block">
                    <!-- 登录表单 -->
                    <form>
                        <!-- 账号输入框 -->
                        <div class="s1">
                            <h4>账户</h4>
                            <input type="text" name="username" placeholder="请输入用户名">
                        </div>
                        <!-- 密码输入框 -->
                        <div class="s1">
                            <h4>密码</h4>
                            <input type="password" name="password" placeholder="请输入密码">
                        </div>
                        <!-- 错误提示信息 -->
                        <a id="l_msg" style="color:red;text-align:center"></a>
                        <!-- 记住密码复选框 -->
                        <div class="s2">
                            <input id="remember" type="checkbox" checked="checked">
                            <span>记住密码</span>
                        </div>
                        <!-- 登录按钮 -->
                        <input name="submit_button" type="button" class="btn" value="登&nbsp;陆">
                    </form>
                </div>
            </div>
        </section>
    </div>
</body>

<script>
    // 记住密码
    function save_cookies () {
        if ($("#remember").prop("checked")) {
            var username = $("[name='username']").val();
            var password = $("[name='password']").val();

            $.cookie("remember", "true", { expires: 7 });
            $.cookie("username", username, { expires: 7 });
            $.cookie("password", password, { expires: 7 });
        } else {
            $.cookie("remember", "false", { expires: -1 });
            $.cookie("username", "", { expires: -1 });
            $.cookie("password", "", { expires: -1 });
        }
    }

    // 加载保存的用户名和密码
    function load_cookies () {
        var rem = $.cookie("remember");
        if (rem) {
            $("#remember").prop("checked", true);
            $("[name='username']").val($.cookie("username"));
            $("[name='password']").val($.cookie("password"));
        }
    }
    $(function () {
        load_cookies();
        $("[name='submit_button']").click(() => {
            $.ajax({
                type: "post",
                url: "/login",
                data: {
                    username: $("[name='username']").val(),
                    password: $("[name='password']").val()
                },
                success: function (result, status, xhr) {
                    if (result.code == 0) {
                        save_cookies();
                        // 清空输入栏
                        $("[name='username']").val("");
                        $("[name='password']").val("");
                        // 清空提示信息栏
                        $("#l_msg").html("");
                        window.location.replace("/blog/all/jumpMainView");
                    } else {
                        window.alert(result.msg);
                    }
                }
            })
        })
    })
</script>

</html>